<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<style>
    .class1{background: #000}
    .class2{background: #f0ad4e}
</style>

<div id="app">
    <p>
        {{message}}
    </p>
    <input type="checkbox" v-model="test"/>
    <div v-bind:class="{'class1':test}">
        点击变色
    </div>



    <label >男</label>
    <input value="1" name="sex" type="radio" v-model="test2" checked>
    <label >女</label>
    <input value="0" name="sex" type="radio" v-model="test2">
    <div v-bind:class="{'class2':test2}">测试2</div>
    <p v-if="seen">这是肯德基圣诞节</p>
    <p>{{site}}</p>
    <p>{{rever}}</p>
    <p>{{rever2()}}</p>
    <p style="font-size:21px">{{counter}}</p>
    <button @click="counter++">dian</button>
    <br>
    米
    <input type="text" v-model="meter" name="meter"/>
    <br>
    千米
    <input type="text" v-model="kilometers" name="kilometers">


    <div class="test1">
        <input type="text" v-model="parentMsg">
        <child v-bind:tester="parentMsg"></child>
    </div>

    <ol>
        <tplist v-for="item in sites" v-bind:tpline="item"></tplist>
    </ol>

    <ol>
        <valilist v-for="va in valits" v-bind:vali="va"></valilist>
    </ol>
</div>

<script>
    var num =1;
    Vue.component('child',{
        props:['tester'],
        template:'<span>{{tester}}</span>'
    });

    Vue.component('tplist',{
       props:['tpline'],
       template:'<li>{{tpline.text}}</li>'
    });

    //验证器
    Vue.component('valilist',{
        props:{
            vali:Number,
            propB:[String,Number]
        },
        template:'<li>{{vali}}</li>'
    });

    let vm=new Vue({
        el:'#app',
        data:{
            message:'Hello Vue',
            test:false,
            test2:0,
            seen:true,
            name: 'guge',
            url :'googel.com',
            counter:1,
            meter:0,
            kilometers:0,
            parentMsg:'测试',
            sites:[
                {text:'Sdsds'},
                {text:'xdsdssds'},
                {text:'IUdsds'},
            ],
            valits:[
                '11',
                222
            ]


        },
        computed:{
            site:{
                get:function () {
                    return this.name +' '+this.url
                },
                set:function(value){
                    let names = value.split(' ');
                    this.name = names[0];
                    this.url = names[1];
                }
            },
            rever:function () {
               num +=1;
               return num+this.message.split('').reverse().join('');
            }
        },
        methods:{
            rever2:function () {
                num +=1;
                return num+this.message.split('').reverse().join('');

            }

        }
    });
    vm.site = '这是一个网站 www.googel.com';
    vm.$watch('counter',function(newchar,oldchar){
        alert('数字变化，由'+oldchar+'变成了'+newchar);
    });
    vm.$watch('meter',function(newnum,oldnum){
        this.kilometers = newnum / 1000;
    });
    vm.$watch('kilometers',function(newnum,oldnum){
        this.meter = newnum * 1000;
    });
</script>

</body>
</html>